<template>
	<infiniteScroll @loadMore="loadMore">
		 <headNav title="邮件"></headNav>
		<div class="s_tit">
			<!-- <a href="#">写邮件</a> -->
			<router-link to="write">写邮件</router-link>
		</div>
		<div class="dz-xx">
			<input @keyup="changeEmailName" v-model.trim="emailName" class="dz-ss" type="text" />
		</div>
		<div class="s_name">
			<ul>
				<li :class="{'on':type === 0}" @click="changeType(0)">
					<div v-show="unread > 0" class="red-num">{{unread}}</div>
					<a href="javascript:;"><span>收件箱</span></a>
				</li>
				<li :class="{'on':type === 1}" @click="changeType(1)"><a href="javascript:;"><span>草稿箱</span></a></li>
				<li :class="{'on':type === 2}" @click="changeType(2)"><a href="javascript:;"><span>已发送</span></a></li>
				<li :class="{'on':type === 3}" @click="changeType(3)"><a href="javascript:;"><span>已删除</span></a></li>
			</ul>
		</div>
		<div class="s_tab">						
			<div class="s_tt">
				<div @click='toEmailDetail(item, index)' v-for="(item,index) in emailList" :key="index" class="e-body">
					<h2>
						<i v-if="item.ReadStatus == 'False' && item.Status == '0'"></i>{{item.UserName}}<span>{{item.SendingTime | formatDateTime('yyyy-MM-dd')}}</span>
					</h2>
					<h3><img src="./img/11124.png" />{{item.Theme}}<img v-if="item.MailTypeCode == '1'" src="./img/sd-ico.png" /></h3>
					<p v-html="item.Content"></p>
				</div>		
			
			</div>
			
		</div>				
		
		<div class="load-p">
			 <load-more v-if="isMore" :tip="'正在加载'"></load-more>
    		<load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
		</div>
		
	</infiniteScroll>
</template>
<script>
import {getReceiveEmailList, getEmailList, getEmailListV2, getUnread} from '@/api/emailApi'
import {mapGetters} from 'vuex'
import infiniteScroll from '@/components/infiniteScroll'
import { LoadMore } from 'vux'
import headNav from '@/components/headNav/headNav';
export default {
	// name: 'emailList',
	components: {
		infiniteScroll, LoadMore, headNav
	},
	data () {
		return {
			type: null,
			page: 0,
			size: 10,
			isMore: true,
			emailList: [],
			emailName: '',
			keyupTimer: 0,
			unread: 0
		}
	},
	computed: {
		...mapGetters(['cookiesObj'])
	},
	methods: {
		changeEmailName (e) {
			if (this.keyupTimer) {
				clearTimeout(this.keyupTimer)
			}
			this.keyupTimer = setTimeout(() => {
				console.log(e.target.value)
				this.changeType(this.type)
			}, 1000)
		},
		changeType (type) {
			// if (type === this.type) {
			// 	return
			// }
			this.type = type
			this.page = 0
			this.isMore = true
			this.emailList = []
			this.getList()
		},
		getList () {
			switch (this.type) {
				case 0:
					this.getUnread()
					this.getReceive()
					break
				case 1:
					this.getEmailList(1)
					break
				case 2:
					this.getEmailList(2)
					break
				case 3:
					this.getEmailListV2(3)
					break
			}
		},
		getReceive () {
			this.page++
			var param = {
				toUserId: this.cookiesObj.loginUserId,
				status: 0,
				page: this.page,
				size: this.size
			}
			if (this.emailName) {
				param.emilName = this.emailName
			}
			getReceiveEmailList(param).then(res => {
				this.getEmailListLater(res)
			})
		},
		getEmailList (status) {
			this.page++
			var param = {
				fromUserId: this.cookiesObj.loginUserId,
				status: status,
				page: this.page,
				size: this.size
			}
			if (this.emailName) {
				param.emilName = this.emailName
			}
			getEmailList(param).then(res => {
				this.getEmailListLater(res)
			})
		},
		getEmailListV2 (status) {
			this.page++
			var param = {
				fromUserId: this.cookiesObj.loginUserId,
				status: status,
				page: this.page,
				size: this.size
			}
			if (this.emailName) {
				param.emilName = this.emailName
			}
			getEmailListV2(param).then(res => {
				res = JSON.parse(res)
				var data = res.Data
				var list = data.List
				var count = data.Count
				if (list.length < this.size) {
					this.isMore = false
				}
				for (var item of list) {
					item.Content = decodeURI(item.Content)
					item.Status = this.type
					this.emailList.push(item)
				}	
			})
		},
		getEmailListLater (res) {
			res = JSON.parse(res)
			var data = JSON.parse(res.Msg)
			var list = data.List
			var count = data.Count
			if (list.length < this.size) {
				this.isMore = false
			}
			for (var item of list) {
				item.Content = decodeURI(item.Content)
				this.emailList.push(item)
			}	
		},
		toEmailDetail (email, index) {
			// debugger
			if (email.ReadStatus == 'False') {
				this.emailList[index].ReadStatus = 'True'
				this.emailList.splice(index, 1, this.emailList[index])
			}
			this.$store.commit('email/setCurEmail', email)
			this.$router.push('detail')
		},
		loadMore () {
			console.log('list load more...')
			if (this.isMore) {
				this.getList()
			}
		},
		getUnread () {
			getUnread({
			
					toUserId: this.cookiesObj.loginUserId,
					mailStatus: 0,
					readStatus: false
				
			}).then(res => {
				res = JSON.parse(res)
				this.unread = parseInt(res.Data)
				if (this.unread > 99) {
					this.unread = 99
				}
			})
		}
	},
	created () {
       
    },
    mounted () {
		this.changeType(0)
	},
	activated () {
		 this.setTitle('邮箱')
		console.log('list activated...')
		// if (this.$store.state.email.isFromHome) {
		// 	this.$store.state.email.isFromHome = false
		// 	this.emailName = ''
		// 	this.changeType(0)
		// }
	
		var addType = this.$store.state.email.addType
		if (addType == 'draft') {
			if (this.type == 1) {
				this.changeType(this.type)
			}
		} else if (addType == 'send') {
				this.changeType(this.type)
		} else if (addType == 'delete') {
			// this.changeType(0)
			var deleteId = this.$store.state.email.deleteId
			for (var i = 0; i < this.emailList.length; i++) {
				if (this.emailList[i].Id == deleteId) {
					this.emailList.splice(i, 1)
				}
			}
		}
		this.$store.state.email.addType = null
		this.getUnread()
	}
}
</script>
<style scoped src="./css/e-mail.css"></style>
<style scoped src="./css/public.css"></style>
<style scoped>
.no-more{
	background-size: 0.24rem 0.12rem;
    font-size: 0.32rem;
    color: #666666;
    display: block;
    width: 1.8rem;
    line-height: 0.68rem;
    margin: 0 auto;
}
.red-num{
	position: absolute;
	height: 0.4rem;
	width: 0.4rem;
	line-height: 0.4rem;
	border-radius: 50%;
	color:#fff;
	background: #e64545;
	top:0;
	right: 0;
}
.load-p{
	padding: 1rem 0 0 0;
}
</style>
